<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,target-densitydpi=device-dpi ">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>城市选择</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_700684_nxz31xbunnl.css">
  <!-- <link rel="stylesheet" href="../../css/common/font_700684_uyri04bavjb/iconfont.css"> -->
  <link rel="stylesheet" href="../../css/common/flex.css">
  <link rel="stylesheet" href="../../css/common/reset.css">
  <link rel="stylesheet" href="../../css/common/border-1px.css">
  <link rel="stylesheet" href="../../css/common/common.css">
  <link rel="stylesheet" href="./city.css">
</head>

<body>
  <div class="page-wrap">
    <div class="city-wrap">
      <!-- 定位城市 -->
      <div class="part-city-lists-wrap">
        <div class="part-city-lists-text-wrap">
          <i class="iconfont icon-dizhi"></i>
          <span class="text fs-16">定位城市</span>
        </div>
        <!--列表 -->
        <div class="part-city-lists-content-wrap">
          <ul class="part-city-items-wrap fx-row fx-row-center fx-wrap">
            <li class="part-city-item-wrap grid-33">
              <div class="part-city-item fx-15">
                上海
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 热门城市 -->
      <div class="part-city-lists-wrap">
        <div class="part-city-lists-text-wrap">
          <i class="iconfont icon-huore"></i>
          <span class="text fs-16">热门城市</span>
        </div>
        <!--列表 -->
        <div class="part-city-lists-content-wrap">
          <ul class="part-city-items-wrap fx-row fx-row-center fx-wrap">
            <li class="part-city-item-wrap grid-33">
              <div class="part-city-item fx-15">
                上海
              </div>
            </li>
            <li class="part-city-item-wrap grid-33">
              <div class="part-city-item fx-15">
                上海
              </div>
            </li>
            <li class="part-city-item-wrap grid-33">
              <div class="part-city-item fx-15">
                上海
              </div>
            </li>
            <li class="part-city-item-wrap grid-33">
              <div class="part-city-item fx-15">
                上海
              </div>
            </li>
            <li class="part-city-item-wrap grid-33">
              <div class="part-city-item fx-15">
                上海
              </div>
            </li>
            <li class="part-city-item-wrap grid-33">
              <div class="part-city-item fx-15">
                上海
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 城市列表 -->
      <div class="city-lists-wrapper">
        <div class="city-lists-wrap">
          <div class="city-lists-text-wrap">
            <span class="text fs-15">A</span>
          </div>
          <!--列表 -->
          <div class="city-lists-content-wrap">
            <ul class="city-items-wrap fx-column">
              <li class="city-item-wrap">
                <div class="city-item b-1px-b fx-15">
                  上海
                </div>
              </li>
              <li class="city-item-wrap">
                <div class="city-item b-1px-b fx-15">
                  上海
                </div>
              </li>
              <li class="city-item-wrap">
                <div class="city-item b-1px-b fx-15">
                  上海
                </div>
              </li>
              <li class="city-item-wrap">
                <div class="city-item b-1px-b fx-15">
                  上海
                </div>
              </li>
              <li class="city-item-wrap">
                <div class="city-item b-1px-b fx-15">
                  上海
                </div>
              </li>
              <li class="city-item-wrap">
                <div class="city-item b-1px-b fx-15">
                  上海
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 右边定位的字母 -->
  <div class="alpha-list-wrap fx-column fx-row-middle">
      <div class="alpha-list">
          <p class="alpha fs-11">定位</p>
          <p class="alpha fs-11">热门</p>
          <p class="alpha fs-11">A</p>
          <p class="alpha fs-11">B</p>
          <p class="alpha fs-11">C</p>
          <p class="alpha fs-11">D</p>
          <p class="alpha fs-11">E</p>
          <p class="alpha fs-11">F</p>
          <p class="alpha fs-11">G</p>
          <p class="alpha fs-11">H</p>
          <p class="alpha fs-11">I</p>
          <p class="alpha fs-11">J</p>
          <p class="alpha fs-11">K</p>
          <p class="alpha fs-11">L</p>
          <p class="alpha fs-11">M</p>
          <p class="alpha fs-11">N</p>
          <p class="alpha fs-11">O</p>
          <p class="alpha fs-11">P</p>
          <p class="alpha fs-11">Q</p>
          <p class="alpha fs-11">R</p>
          <p class="alpha fs-11">S</p>
          <p class="alpha fs-11">T</p>
          <p class="alpha fs-11">U</p>
          <p class="alpha fs-11">V</p>
          <p class="alpha fs-11">W</p>
          <p class="alpha fs-11">X</p>
          <p class="alpha fs-11">Y</p>
          <p class="alpha fs-11">Z</p>

      </div>
  </div>
</body>
<script src="../../asset/js/rem.js"></script>
<script>

</script>

</html>